<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: "clockIcon";
            src: url(../../font/clockicons.woff2);
        }
        .warp {
            border: 1px solid #333;
            width: 500px;
            height: 300px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 60px;
            line-height: 54px;
        }

        .font {
            font-size: 20px;
        }
        #time {
            font-family: "clockIcon";
        }
        #date {
            margin-top: 20px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div class="warp">
        <span class="font">现在的时间</span>
        <div id="time">00:00:00</div>
        <div id="date">2021年8月21日</div>
    </div>
</body>
<script>
    var time = document.getElementById("time");
    var dates = document.getElementById("date");
    nowTime();
    setInterval(nowTime, 1000);
    function nowTime() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth();
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        
        dates.innerText = `${year}年${beauty(month+1)}月${beauty(day)}日`;
        time.innerText = `${hour}:${beauty(minute)}:${beauty(second)}`;
    }
    function beauty(num) {
        return num < 10 ? "0" + num : num;
    }
</script>

</html>